<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-container">
    <!-- 登录 -->
    <el-card class="box-card" v-if="updatePwd">
      <div class="card-header">
        <h1>企业人事管理平台</h1>
      </div>
      <el-form ref="loginForm" :model="FormData" :rules="rule" autocomplete="off">
        <el-form-item prop="email">
          <el-input v-model="FormData.email" :prefix-icon="User" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="FormData.password" name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
            show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="yzmNum" style="width: 125px" placeholder="请输入验证码" />
          <div class="demo-image__lazy" @click="yzm">
            <el-image style="width: 110px" class="el-image" :src="yzmUrl.value" loading="lazy" />
          </div>
        </el-form-item>

        <el-form-item class="flex">
          <el-checkbox>记住我</el-checkbox>
          <el-link type="primary" :underline="false" @click="updatePwd = false" class="el-link">忘记密码？</el-link>
        </el-form-item>
        <el-form-item>
          <el-button class="login-button" @click="login" type="primary" auto-insert-space>登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 修改密码 -->
    <el-card class="box-card" v-else>
      <div class="card-header">
        <h1>企业人事管理平台</h1>
      </div>
      <el-form ref="loginForm" :model="FormData" :rules="rule" autocomplete="off">
        <el-form-item prop="email">
          <el-input v-model="FormData.email" :prefix-icon="User" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <div class="con-info"> &nbsp;请填写您的邮箱地址<br> &nbsp;我们会将新的密码发送邮箱</div>
        </el-form-item>

        <el-form-item class="flex">
          <el-checkbox>记住邮箱</el-checkbox>
          <el-link type="primary" :underline="false" @click="updatePwd = true" class="el-link">返回登录</el-link>
        </el-form-item>

         <el-form-item>
          <el-button class="login-button" @click="updatePwdFn" type="primary" auto-insert-space v-if="flag">重置密码</el-button>
          <el-button class="login-button" @click="updatePwdFn" type="primary" auto-insert-space v-else>重置密码 ( {{ timeS }} ) </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { Login, YZM } from '@/model'
import { useRouter } from 'vue-router'
import { userLogin } from '@/api/user'
import { getYzmImage } from '@/api/yzm'
import { UseUserStore } from '@/stores/index'
import { User, Lock } from '@element-plus/icons-vue'
import { getEamil } from '@/api/email'

const updatePwd = ref<boolean>(true)
const router = useRouter()
const useStore = UseUserStore()

// 登录表单数据
const FormData = ref<Login>({
  email: '1597310496@qq.com',
  password: '1234567'
})

// 登录请求
const login = async () => {
  // 判断验证码
  if (yzmNum.value == yzmUrl.value.key) {
    const res = await userLogin(FormData.value)
    // 获取用户数据
    useStore.setUser(res.data)
    router.push('/index')
    ElMessage.success('登录成功')
  } else {
    ElMessage.error('验证码输入错误')
    yzm()
  }
}

// 获取验证码图片
const yzmUrl = ref<YZM>({
  id: 0,
  key: '',
  value: ''
})

// 用户输入的验证码
const yzmNum = ref('')
const yzm = async () => {
  const res = await getYzmImage()
  yzmUrl.value = res.data
  console.log(yzmUrl.value)
}
yzm()

// 校验规则
const rule = {
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    {
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: '请输入有效的邮箱地址',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须是 6 ~ 15 位的非空字符', trigger: 'blur' }
  ]
}

// 重置密码
const timeS = ref<number>(60)
const flag = ref<boolean>(true)
const updatePwdFn = async () => {
  flag.value = false
    const timeId = setInterval(() => {
      if (timeS.value > 0) {
        timeS.value--
      }
    }, 1000);
  const res = await getEamil(FormData.value)
  ElMessage.success(res.data)
  clearInterval(timeId)
  flag.value = true
  updatePwd.value = true
}
</script>
<style lang="scss" scoped>
.login-container {
  /*  Flexbox 布局 启用 Flexbox 的对齐功能*/
  display: flex;
  /* 水平方向 居中对齐 */
  justify-content: center;
  /* 垂直方向 居中对齐 */
  align-items: center;
  /* height: 882px; */
  height: 100vh;
  background: url('@/assets/img/bgi.jpg') no-repeat center / cover;
}

.el-input {
  font-size: 15px;
  height: 37px;
}

.box-card {
  
  opacity: 0.9;
  padding: 0 40px 10px 40px;

  .demo-image__lazy {
    background-color: pink;
    margin-left: 10px;
    display: flex;
  }
  .con-info {
    color: red;
    margin-bottom: 7px;
    font-size: 14px;
  }
}

.card-header {
  margin-bottom: 20px;
  text-align: center;
}

.el-image-yzm {
  width: 85px;
  height: 37px;
  margin-left: 10px;
}

.el-link {
  margin-left: 100px;
  height: 37px;
}

.login-button {
  width: 100%;
  color: #fff;
  font-weight: 700;
  background-color: #69a3fd;
  /* background-image: linear-gradient(to right, #2c5d2f, #7198fd); */
}

.register {
  font-size: 80%;
  color: #00000077;
  cursor: pointer;
}
</style>
